<template>
  <div class="box">
<div class="box1">
  <h1>UNI-ADMIN</h1>
    <el-form  id="q1" :model="userinfo" class="demo-form-inline">
        <el-form-item label="用户名:">
          <el-input
            v-model="userinfo.name"
             type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="userinfo.pass"  type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="login">登陆</el-button>
             <el-button type="primary" class="btn" @click="chong">重置</el-button>
        </el-form-item>
      </el-form>
</div>
  </div>
</template>
<script>
export default {
data() {
  return {
    userinfo:{
      name:"",
      pass:""
    }
  }
},
methods:{
  // 登录
  login(){
this.$axios.post("http://ceshi5.dishait.cn/admin/login",{
 username:this.userinfo.name,
  password:this.userinfo.pass,
}).then((res)=>{
  if(res.data.msg=="ok"){
    localStorage.setItem("token",res.data.data.token);
    this.$router.push({path:"/home"})
  }
}).catch((res)=>{
  alert("登录失败")
})
  },
  //   重置
  chong(){
 this.userinfo.name="",
 this.userinfo.pass=""
  }
}
}
</script>
<style scoped>
.box{
  width: 1525px;
  height:700px;
  margin: 0 auto;
  background: lightskyblue;
  padding-top: 1px;
}
.box1{
  width: 600px;
  height: 350px;
  margin: 0 auto;
  margin-top: 180px;
  background:linen;
}
h1{
  text-align: center;
  line-height: 100px;
}
.btn{
  width:70px;
  height:40px;
}
#q1{
  width: 400px;
  margin: 0 auto;
  margin-top: -30px;
}
</style>